<template>
  <Table
    :columns="state.columns"
    :data="state.data"
    ref="actionRef"
    row-key="AdmLoc"
    :request="loadDataTable"
  >
    <template #tableTitle>
      <el-button size="small" type="primary">
        <el-icon>
          <elementPlus />
        </el-icon>
        新建
      </el-button>
    </template>
    <template #toolbar>
      <el-button type="primary" size="small">刷新数据</el-button>
    </template>
    <template #action="{ row }">
      <el-tag size="small">{{ row.action }}</el-tag>
    </template>
    <!-- <template #action.header="{ column }">
			<el-tag size="small">{{ column.label }}</el-tag>
		</template> -->
  </Table>
</template>

<script lang="ts" setup>
import Table from '@/components/Table/index.vue';
import { reactive } from 'vue';
const state = reactive({
	columns: [
		{ prop: 'AdmLoc', label: '科室名称', fixed: true },
		{ prop: 'Num', label: '人次' },
		{ prop: 'Cost', label: '手术费用' },
		{ prop: 'Pain', label: '手术后镇痛', fixed: 'right' },
		{ prop: 'action', label: '操作', fixed: 'right' },
	],
	data: [
		{
			AdmLoc: '肿瘤科病区',
			Num: 1,
			Cost: 0,
			Pain: 0,
			action: '删除',
			children: [
				{
					AdmLoc: '肿瘤科病区1',
					Num: 1,
					Cost: 0,
					Pain: 0,
					action: '删除',
				},
				{
					AdmLoc: '肿瘤科病区2',
					Num: 1,
					Cost: 0,
					Pain: 0,
					action: '删除',
				},
			],
		},
		{
			AdmLoc: '内科病区',
			Num: 1,
			Cost: 0,
			Pain: 0,
			action: '删除',
		},
	],
});
const loadDataTable = () => {
	return [];
};
</script>

<style scoped lang="scss"></style>
